<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../../plugins/layui/css/layui.css"/>
    <link rel="stylesheet" href="../../../css/normalize.css"/>
    <link rel="stylesheet" href="../../../css/fa.css"/>
    <link rel="stylesheet" href="../../../css/icon.css"/>
    <link rel="stylesheet" href="../../../css/ares_animate.min.css"/>
    <link rel="stylesheet" href="../../../css/ares_hover_variant.min.css"/>
    <link rel="stylesheet" href="../../../css/ares_reboot.css"/>
    <link rel="stylesheet" href="../../../css/app.min.css"/>
    <link rel="stylesheet" href="../../../css/iframe.css"/>
    <style>
        .echart {
            height: 350px;
        }
        .layui-tab-content {
            min-height: 400px;
        }
        hr {
            height: 1px;
        }
    </style>
</head>
<body class="ares-pb-lg">
<div class="layui-tab layui-tab-card layui-hide" lay-filter="tab">
    <ul class="layui-tab-title">
        <li class="layui-this" data-file="tendency">整体趋势</li>
        <li data-file="person">人员统计</li>
        <li data-file="therapist">治疗师收费</li>
        <li data-file="patient">患者收费</li>
    </ul>
    <div class="layui-tab-content">
        <div class="layui-tab-item tendency layui-show"></div>
        <div class="layui-tab-item person"></div>
        <div class="layui-tab-item therapist"></div>
        <div class="layui-tab-item patient"></div>
    </div>
</div>


<script type="text/javascript" src="../../../plugins/layui/layui.js"></script>
<script type="text/javascript" src="../../../aresExtends/config/layuiConfig.js"></script>
<script src="../../../plugins/echarts.min.js"></script>
<script>
    var element, table, form, laypage, config, utils, filters, dateFilters, mandyServices, commonServices, store, laydate, layer;
    var treatmentGroups = [];

    function setTab1Option(t, n, v, c) {
        var option = {
            title: {
                subtext: t,
                left: 20,
                top: 20
            },
            tooltip: {
                trigger: 'item',
                confine: true,
                formatter: "{b} : {c} ({d}%)"
            },
            legend: {
                top: 'bottom',
                itemWidth: 14,
                data: n
            },
            series: [
                {
                    type: 'pie',
                    radius: ['40%', '60%'],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '20',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data: v,
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ],
            color: c
        };
        return option;

    }

    function renderTreatmentGroup(formFilter, selectName) {
        var $GroupSelect = $('select[name="' + selectName + '"]'),
            defaultGroupId = treatmentGroups[0].id;
        $GroupSelect.empty();
        $.each(treatmentGroups, function (idx, list) {
            $GroupSelect.append("<option value = '" + list.id + "'>" + list.name + "</option>");
        })
        form.val(formFilter, {
            [selectName]: defaultGroupId
        });
        form.render('select');
    }

    layui.use(['element', 'table', 'form', 'laypage', 'conf', 'utils', 'filters', 'dateFilters', 'mandyServices', 'commonServices', 'store', 'laydate', 'layer'], function (_element, _table, _form, _laypage, _config, _utils, _filters, _dateFilters, _mandyServices, _commonServices, _store, _laydate, _layer) {
        element = _element;
        table = _table;
        form = _form;
        laypage = _laypage;
        config = _config;
        utils = _utils;
        filters = _filters;
        dateFilters = _dateFilters;
        mandyServices = _mandyServices;
        commonServices = _commonServices;
        store = _store;
        laydate = _laydate;
        layer = _layer;

        function init() {
            getTreatmentGroup().then(function () {
                utils.loadView('./tendency.html', $('.layui-tab-content>.tendency'));
            });
        }

        init();
        element.on('tab(tab)', function (data) {
            var fileName = $(this).data('file'),
                $contentWrap = $('.layui-tab-content>.' + fileName),
                hasContent = !!$contentWrap.children().length;
            if (hasContent) return;
            utils.loadView('./' + fileName + '.html', $contentWrap);
        });

        /**
         * @author: ares
         * @date: 2021/4/20 9:16
         * @description: 获取治疗组
         */
        function getTreatmentGroup() {
            return mandyServices.mandy_get_treatment_group_syn().then(function (res) {
                treatmentGroups = res.data.treat_groups || [];
                $('.layui-tab').removeClass('layui-hide');
                return treatmentGroups;
            })
        }
    })
</script>
</body>
</html>